<template>
    <div class="Fc">
<Title msg="直播" msg2="2880w人和你一起看直播~" msg3="" :mg4="obj" :mg5="obj2"></Title>
<ul class="FirstUl">
    <li class="FirstUlLi1">
        <ul class="SecondUl">
            <li class="Li1"><div class="LiDiv">
                <div class="Img2"><img src="../img/人群.png" alt=""></div>
                <span>288W</span>
               </div>
            <div class="LiDiv1"><div class="Li1Div"></div>
            <div class="Li1Div2">
                <p class="p1">金坷垃本拉</p>
                <p class="p2">肥料就选金坷垃！</p>
                <p class="p3">两个世界，一袋坷垃</p>
            </div>
            </div>
    </li>
                <li class="Li1"><div class="LiDiv">
                <div class="Img2"><img src="../img/人群.png" alt=""></div>
                <span>288W</span>
               </div>
            <div class="LiDiv1"><div class="Li1Div"></div>
            <div class="Li1Div2">
                <p class="p1">金坷垃本拉</p>
                <p class="p2">肥料就选金坷垃！</p>
                <p class="p3">两个世界，一袋坷垃</p>
            </div>
            </div>
    </li>
                <li class="Li1"><div class="LiDiv">
                <div class="Img2"><img src="../img/人群.png" alt=""></div>
                <span>288W</span>
               </div>
            <div class="LiDiv1"><div class="Li1Div"></div>
            <div class="Li1Div2">
                <p class="p1">金坷垃本拉</p>
                <p class="p2">肥料就选金坷垃！</p>
                <p class="p3">两个世界，一袋坷垃</p>
            </div>
            </div>
    </li>
                <li class="Li1"><div class="LiDiv">
                <div class="Img2"><img src="../img/人群.png" alt=""></div>
                <span>288W</span>
               </div>
            <div class="LiDiv1"><div class="Li1Div"></div>
            <div class="Li1Div2">
                <p class="p1">金坷垃本拉</p>
                <p class="p2">肥料就选金坷垃！</p>
                <p class="p3">两个世界，一袋坷垃</p>
            </div>
            </div>
    </li>
                <li class="Li1"><div class="LiDiv">
                <div class="Img2"><img src="../img/人群.png" alt=""></div>
                <span>288W</span>
               </div>
            <div class="LiDiv1"><div class="Li1Div"></div>
            <div class="Li1Div2">
                <p class="p1">金坷垃本拉</p>
                <p class="p2">肥料就选金坷垃！</p>
                <p class="p3">两个世界，一袋坷垃</p>
            </div>
            </div>
    </li>
                <li class="Li1"><div class="LiDiv">
                <div class="Img2"><img src="../img/人群.png" alt=""></div>
                <span>288W</span>
               </div>
            <div class="LiDiv1"><div class="Li1Div"></div>
            <div class="Li1Div2">
                <p class="p1">金坷垃本拉</p>
                <p class="p2">肥料就选金坷垃！</p>
                <p class="p3">两个世界，一袋坷垃</p>
            </div>
            </div>
    </li>
    
            
        </ul>
    </li>
    <li class="FirstUlLi2">
        <div class="Li2Div">
            <SideBar msg4="金坷垃本拉在线销售金坷垃"></SideBar>
        </div>
        </li>
</ul>
    </div>
</template>
<style scoped>
.Li2Div{
    background-color: skyblue;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 29px;
}
.Fc{
    width: 1520px;
    margin: auto;
    margin-top: 100px;
}
.FirstUl{
    display: flex;
}
.FirstUlLi1{
    flex: 3.1;
}
.FirstUlLi2{
    flex: 0.8;
    margin-left: 18px;
    background-color: pink;
    float: right;
    padding-bottom: 10px;
    position: relative;
}
.LiDiv{
    background-image: url(../img/7e14dc6ea0305a50bdb3762a98b8dbaf.jpg);
    background-size: 100%;
    background-position: 0px -6px;
    height: 188px;
    margin-bottom: 9px;
    display: flex;
}
.SecondUl{
    display: flex;
    flex-wrap: wrap;
}
.Li1{
width: 32.3%;
margin-top: 18px;

}
.SecondUl li:nth-child(2){
    margin-left: 18px;
    margin-right: 18px;
}
.SecondUl li:nth-child(5){
    margin-left: 18px;
    margin-right: 18px;
}
.Li1Div{
    width: 60px;
    height: 60px;
    background-image: url(../img/bddaaa92fef04986418e9953349dc9c3.jpeg);
    background-size: 180%;
    border-radius: 50%;
    margin-right: 0px;
    display: flex;
}
.LiDiv1{
    display: flex;
}
.Li1Div2{
    margin-top: 10px;
    margin-left: 8px;
    width: 220px;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 10px;
}
.p1{
font-size: 18px;
font-family: Microsoft YaHei UI;
font-weight: 400;
color: #FCFBFC;
height: 18px;
}
.p2{
font-size: 14px;
font-family: Microsoft YaHei UI;
font-weight: 400;
color: #A09FA0;
margin-top: 5px;
margin-left: 9px;
height: 14px;
}
.p3{
width: 108px;
font-size: 12px;
font-family: Microsoft YaHei UI;
font-weight: 400;
color: #666566;
height: 12px;
}
.Img2{
    width: 40px;
    height: 40px;
    overflow: hidden;
display: inline-block;
margin-top: 149px;
margin-left: 6px;
margin-right: 9px;
}
span{
    font-size: 16px;
font-family: Microsoft YaHei UI;
font-weight: 400;
color: #FFFEFF;
margin-top: 164px;
}
.Img2>img{
    width: 40px;
    height: 40px;
    margin-left: -40px;
    filter: drop-shadow(40px 0px 0rem #FFFFFF);
}
</style>
<script>
import Title from './Title.vue'
import SideBar from './SideBar.vue'
import img1 from '../img/直播.png'
import img5 from '../img/火.png'
export default {
    components:{
        Title,
        SideBar
    },
   data(){
       return{
           obj:{img:img1},
            obj2:{img:img5},
           
       }
   }

}
</script>